<script setup lang="ts">
import logo from '@/assets/logo.svg';
import { useUserStore } from '@/store';

interface Props {
  avatar?: string;
  text?: string;
}

defineOptions({ name: 'LockScreenModal' });

const visible = defineModel<boolean>();

withDefaults(defineProps<Props>(), {
  avatar: '',
  text: '',
});

const userStore = useUserStore();
const _avatar = computed(() => userStore.userInfo.avatar || logo);
const _text = computed(() => userStore.userInfo.username || userStore.userInfo.nickname);

const emit = defineEmits(['submit']);

const form = ref({
  lockScreenPassword: '',
});

const formRef = useTemplateRef('formRef');
async function handleSubmit() {
  await formRef.value?.validate();
  emit('submit', form.value?.lockScreenPassword);
  await formRef.value?.resetFields();
  await formRef.value?.clearValidate();
}
</script>

<template>
  <el-dialog v-model="visible" title="锁定屏幕" :show-close="false" append-to-body width="380">
    <div class="mb-10 flex w-full flex-col items-center px-10">
      <div class="w-full">
        <div class="flex w-full flex-col items-center">
          <el-avatar :size="80" :src="_avatar" />
          <el-text class="my-5 flex-x-center">{{ _text }}</el-text>
        </div>
        <el-form ref="formRef" :model="form">
          <el-form-item
            prop="lockScreenPassword"
            :rules="{ required: true, message: '请输入锁屏密码', trigger: ['blur', 'change'] }"
          >
            <el-input
              v-model="form.lockScreenPassword"
              type="password"
              show-password
              placeholder="请输入锁屏密码"
              @keydown.enter.prevent="handleSubmit"
            />
          </el-form-item>
        </el-form>
        <el-button type="primary" class="mt-1 w-full" @click="handleSubmit">锁定</el-button>
      </div>
    </div>
  </el-dialog>
</template>
